<template>
  <div class="login-container">
    <!-- 主登录卡片 -->
    <div class="login-card">
      <!-- Logo区域 -->
      <div class="logo-section">
        <img src="/mono-admin-logo.png" alt="Mono Admin" class="logo" />
        <h1 class="brand-title">Mono Admin</h1>
        <p class="brand-subtitle">现代化管理系统</p>
        <div class="brand-description">
          <p>专业的后台管理系统</p>
          <p>简洁 · 高效 · 安全</p>
        </div>
      </div>

      <!-- 登录表单 -->
      <div class="form-section animate-on-enter animate-delay-1">
        <div class="form-header">
          <h2 class="form-title">欢迎回来</h2>
          <p class="form-subtitle">请登录您的账户</p>
        </div>

        <a-form :model="loginForm" :rules="rules" @finish="handleLogin" layout="vertical" class="login-form">
          <a-form-item name="username" class="animate-on-enter animate-delay-2">
            <label class="input-label">用户名</label>
            <a-input v-model:value="loginForm.username" placeholder="请输入用户名" size="large" :prefix="h(UserOutlined)" />
          </a-form-item>

          <a-form-item name="password" class="animate-on-enter animate-delay-3">
            <label class="input-label">密码</label>
            <a-input-password v-model:value="loginForm.password" placeholder="请输入密码" size="large"
              :prefix="h(LockOutlined)" />
          </a-form-item>

          <a-form-item name="remember" class="animate-on-enter animate-delay-4">
            <div class="form-options">
              <a-checkbox v-model:checked="loginForm.remember" class="remember-checkbox">
                记住密码
              </a-checkbox>
            </div>
          </a-form-item>

          <a-form-item class="animate-on-enter animate-delay-5">
            <a-button type="primary" html-type="submit" size="large" :loading="loading" class="login-btn">
              <span v-if="!loading">登录</span>
              <span v-else>登录中...</span>
            </a-button>
          </a-form-item>
        </a-form>


      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, h, onMounted } from 'vue'
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue'
import { useUserStore } from "@/stores/user.js"

const userStore = useUserStore()
const loading = ref(false)

// 登录表单数据
const loginForm = reactive({
  username: '',
  password: '',
  remember: false
})

// 表单验证规则
const rules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 20, message: '用户名长度在 4 到 32 个字符', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, message: '密码长度最少六个字符', trigger: 'blur' }
  ]
}



// 登录处理
const handleLogin = async (fromData) => {
  userStore.accountLogin(fromData, loading)
}

// 页面初始化
onMounted(() => {
  // 检查是否有记住的用户信息
  const rememberedUser = localStorage.getItem('rememberedUser')
  if (rememberedUser) {
    try {
      const userInfo = JSON.parse(rememberedUser)
      if (userInfo.remember) {
        loginForm.username = userInfo.username
        loginForm.remember = true
      }
    } catch (error) {
      console.error('解析记住的用户信息失败:', error)
    }
  }
})
</script>

<style lang="less" scoped>
// 主容器
.login-container {
  width: 100vw;
  height: 100vh;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}



// 主登录卡片
.login-card {
  width: 1000px;
  max-width: 95%;
  height: 600px;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  display: flex;
  animation: slideUp 0.8s ease-out;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

// Logo区域
.logo-section {
  flex: 1.2;
  background: #fafafa;
  border-right: 1px solid #e5e7eb;
  padding: 60px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}



.logo {
  width: 160px;
  height: auto;
  max-height: 160px;
  object-fit: contain;
  margin-bottom: 32px;
  border-radius: 12px;
  padding: 0;
  border: none;
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-2px);
  }
}

.brand-title {
  font-size: 32px;
  font-weight: 700;
  color: #1f2937;
  margin: 0 0 12px 0;
  letter-spacing: 0.5px;
}

.brand-subtitle {
  font-size: 16px;
  color: #6b7280;
  margin: 0 0 20px 0;
  font-weight: 400;
}

.brand-description {
  p {
    font-size: 14px;
    color: #9ca3af;
    margin: 6px 0;
    font-weight: 400;
    line-height: 1.4;
  }
}

// 表单区域
.form-section {
  flex: 0.8;
  padding: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}

.form-header {
  text-align: center;
  margin-bottom: 32px;
  animation: fadeInDown 0.8s ease-out 0.3s both;

  .form-title {
    font-size: 24px;
    font-weight: 600;
    color: #333333;
    margin: 0 0 8px 0;
    position: relative;

    &::after {
      content: '';
      position: absolute;
      bottom: -4px;
      left: 50%;
      transform: translateX(-50%);
      width: 40px;
      height: 2px;
      background: linear-gradient(90deg, #1890ff, #40a9ff);
      border-radius: 1px;
    }
  }

  .form-subtitle {
    font-size: 14px;
    color: #666666;
    margin: 12px 0 0 0;
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

// 输入组件
.login-form {
  animation: fadeInUp 0.8s ease-out 0.5s both;

  :deep(.ant-form-item) {
    margin-bottom: 20px;
    animation: slideInLeft 0.6s ease-out both;

    &:nth-child(1) {
      animation-delay: 0.6s;
    }

    &:nth-child(2) {
      animation-delay: 0.7s;
    }

    &:nth-child(3) {
      animation-delay: 0.8s;
    }

    &:nth-child(4) {
      animation-delay: 0.9s;
    }
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

// 表单选项
.form-options {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 20px;
}

.remember-checkbox {
  :deep(.ant-checkbox) {
    border-color: #d9d9d9;

    &:hover {
      border-color: #1890ff;
    }
  }

  :deep(.ant-checkbox-checked .ant-checkbox-inner) {
    background-color: #1890ff;
    border-color: #1890ff;
  }

  :deep(.ant-checkbox + span) {
    color: #333333;
    font-size: 14px;
  }
}

// 登录按钮
.login-btn {
  width: 100%;
  height: 48px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  background: linear-gradient(135deg, #1890ff 0%, #40a9ff 100%);
  border: none;
  color: #ffffff;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);
  position: relative;
  overflow: hidden;
  animation: slideInUp 0.8s ease-out 1s both;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
  }

  &:hover {
    background: linear-gradient(135deg, #40a9ff 0%, #69c0ff 100%);
    box-shadow: 0 6px 20px rgba(24, 144, 255, 0.4);
    transform: translateY(-2px);

    &::before {
      left: 100%;
    }
  }

  &:active {
    background: linear-gradient(135deg, #096dd9 0%, #1890ff 100%);
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(24, 144, 255, 0.3);
  }

  &:disabled {
    background: #f5f5f5;
    color: #bfbfbf;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;

    &::before {
      display: none;
    }
  }
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}



// 响应式设计
@media (max-width: 1200px) {
  .login-card {
    width: 900px;
    height: 550px;
  }
}

@media (max-width: 768px) {
  .login-card {
    flex-direction: column;
    width: 100%;
    height: auto;
    margin: 10px;
    border-radius: 12px;
  }

  .logo-section {
    flex: none;
    border-right: none;
    border-bottom: 1px solid #e8e8e8;
    padding: 40px 30px;
  }

  .form-section {
    flex: none;
    padding: 40px 30px;
  }

  .logo-container .logo {
    width: 100px;
    max-height: 100px;
    padding: 15px;
  }

  .logo-container .brand-title {
    font-size: 24px;
  }

  .logo-container .brand-subtitle {
    font-size: 14px;
  }

  .form-header .form-title {
    font-size: 20px;
  }
}
</style>